<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>E3</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/all.css" />
		<style type="text/css">
		    .mui-table-view.mui-grid-view{ padding: 0px;}
			.mui-table-view:after {
				height: 0px;
			}
			/*图片显示的时候设置为自动 因为 从服务器来的图片大小相同*/
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
				line-height: auto;
				max-width: auto;
				height: auto;
				border-top-right-radius: 4px;
				border-top-left-radius: 4px;
				
			}
			
			.mui-table-view-cell {
				margin-bottom: 5px;
			}
			
			.bgDiv {
				border: 1px solid rgba(204, 204, 204, 0.7);
				border-radius: 5px;
				background-color: white;
				width: 100%;
			}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				margin-top: 1px;
				margin-bottom: 3px;
				height: auto;
				margin-left:10px;
			}
		
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body p {
				white-space: pre;
				color: black;
			}
			.mui-table-view.mui-grid-view .mui-table-view-cell{ text-align:left;}
				.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body h4 {
				color: red;
			}
			.mui-icon-chat,.mui-icon-starhalf{ color:#2AC845; font-size:15px; margin-left: 5px;}
			
			
			
			.mui-icon-search{ position:absolute; left:5px; top:5px; color:#2AC845;}
		</style>
	</head>
	<body>
		
		 <div style="margin:0 auto; width:90%; height:40px;position:fixed;z-index:100; margin: 15px;">
				<input class="" id="serach" type="text" style="border-radius: 15px; height: 38px; background:#000000; opacity:0.4 ; padding-left:30px;"><span class="mui-icon mui-icon-search" id="icon-serach"></span>
			</div>
		<div class="mui-content">
			<div id="homeDiv" class="mui-content own-content-padding">
				<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../img/slider/slider1.jpg">
					</a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../img/slider/slider1.jpg">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../img/slider/slider2.jpg">
					</a>
				</div>
				<div class="mui-slider-item">
					<a href="#">
						<img src="../img/slider/slider3.jpg">
					</a>
				</div>
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../img/slider/slider1.jpg">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
			</div>
				<div id="recommend" class="mui-table-view mui-grid-view own-gray-color">
 
				</div>  
		</div>
	</body>

	<script src="../js/mui.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
	   var page=1;
		mui.init({
			swipeBack: false
		});
		mui.preload({
			url: '../serachproduct/product.html',
			id: 'serachproduct_product.html'
		})
		var currentWebview;
		var homeDiv;
		var marqueeArray = []; //跑马灯数据数组
		var recommendArray = []; //推荐商品数组
		    mui.plusReady(function() {
					mui("#slider").slider({
						interval: 1000
					});
            var sub=plus.webview.create("../Home/home_index.html","home_index","");
			currentWebview = plus.webview.currentWebview();
			homeDiv = document.getElementById('homeDiv');
			//初始化一些本地数据
			initSomeData();
			//设置推荐商品
		    setRecommend();
			//添加每个item点击的监听事件
			mui('#recommend').on('tap', 'a', function() {
				var item = this;
				var itemID = this.getAttribute('href');
				var extendOptions = {
					itemID: itemID
				};
                  itemID=itemID==1?'yf':'kz';
                  mui.fire(sub,"loadcontent",{name:itemID});
              	  sub.show("fade-in",100) 
			});
				document.getElementById("serach").addEventListener("tap", function() {
					mui.openWindow({
						url:'../serachproduct/product.html',
						id: 'serachproduct_product.html',
						waiting: {
							autoShow: false
						}
					})
				})
		})

		function initSomeData() {
			var row=page*10;
			for (var i = 1; i <=row; i++) {
				var dataItem = {};
				dataItem.product_price = {default_price:"20.00",list_price:"28.0"};
				dataItem.product_name = "最新商品，推荐购买 ";
				dataItem.large_image_url = "../img/"+i+".jpg";
				dataItem.product_id = (i);
				recommendArray.push(dataItem);
			}
		}
		//设置推荐商品
		function setRecommend() {
			var recommend = document.getElementById('recommend');
			mui.each(recommendArray, function(index, item) {
				var li = document.createElement('li');
				li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
				li.innerHTML = '<a href="' + item.product_id + '">\
					<div class= "bgDiv">\
						<img class="mui-media-object" src="'+item.large_image_url+'"/>\
						<div class="mui-media-body">\
							<h4>¥' + item.product_price.default_price + '<span class="mui-icon mui-icon-starhalf"></span></h4>\
							<h5>' + item.product_name + '</h5>\
							<h5>已有10人评价</h5>\
							<p class="mui-ellipsis">小潘 <span class="mui-icon mui-icon-chat"></span></p>\
						</div>\
					</div>\
				</a>';
				recommend.appendChild(li);
			});
		}
	</script>

</html>